<template>
    <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_search_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '弹出框',
            docList: [
                {
                    label: '引入组件',
                    value: `
        import { IDialog } from 'wd-platform-library'
        import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'`
                },
                {
                    label: '弹出框对象',
                    type: 'pre',
                    value: `
    const dialogData = reactive<DialogDataInterface>({
        width: 800, // 弹框宽度
        buttonList: [  //配置自定义弹框底部按钮(不必传)
            {
                //按钮文字
                label: '取消',   
                //按钮回方法
                buttonFun: 'dialogCancel',  
                 //按钮 antdv配置
                options: {     
                    type: 'default'
                },
                //根据权限判断true,false
                isShow: true 
            },
            {
                //按钮文字
                label: '确定',
                buttonFun: 'dialogSbumit',
                //按钮 antdv配置
                options: {
                    type: 'primary'
                },
                // 按钮加载中状态控制
                loading: false,
                //根据权限判断true,false
                isShow: true 
            }
        ],
        show: false, // 弹框是否展示
        title: '弹窗标题', // 弹框名字
        onSubmit: async () => {   //默认提交按钮(不传递此方法则提交按钮不展示)
                await myForm.value.onSubmit().then(async (res: any) => {
                    const [resultData, err] = await updateApp({
                        id: res.form.id,
                        appId: res.form.appId,
                        appName: res.form.appName,
                        appSecret: res.form.appSecret,
                        appDesc: res.form.appDesc,
                        iconPath: res.form.iconPath,
                        verify: res.form.verify,
                        status: res.form.status
                    })
                    if (!err && resultData) {
                        dialogData.onCancel && dialogData.onCancel()
                        sysMsg.successMsg(resultData.result)
                        appSecretRef.value.initSelectTableList()
                    }
                }).catch(() => {})
            },
        onCancel: () => {   //默认取消按钮(不传递此方法则取消按钮不展示)
                myForm.value.resetForm()
                dataForm.form = {
                    id: '',
                    appName: '',
                    appId: '',
                    appSecret: '',
                    appDesc: '',
                    iconPath: '',
                    verify: '0',
                    status: '0'
                }
                dialogData.show = false
            }
    })`
                },
                {
                    label: 'buttonList说明',
                    type: 'pre',
                    value: `
    {
        //按钮文字
        label: '确定',
        buttonFun: 'dialogSbumit',
        //按钮 antdv配置
        options: {
                type: 'primary'
        },
        // 按钮加载中状态控制
        loading: false,
        //根据权限判断true,false
        isShow: true 
    },`
                },
                {
                    label: '弹出框关闭后调',
                    type: 'pre',
                    value: `
     注册cancel方法  : <IDialog :dialogData="dialogData" @cancel="dialogCancel"></IDialog>`
                }

            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
